<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intl.NumberFormat 数字格式化</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        .description {
            text-align: center;
            margin-bottom: 30px;
            color: #7f8c8d;
        }

        .input-section {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .input-group {
            flex: 1;
            min-width: 200px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #34495e;
        }

        input,
        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        button {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }

        button:hover {
            background: #2980b9;
        }

        .results {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .result-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .result-title {
            font-weight: 600;
            margin-bottom: 10px;
            color: #2c3e50;
            font-size: 18px;
        }

        .result-value {
            font-size: 20px;
            color: #e74c3c;
            font-weight: 500;
        }

        .code {
            background: #2c3e50;
            color: white;
            padding: 15px;
            border-radius: 5px;
            margin-top: 30px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
        }

        @media (max-width: 768px) {
            .input-section {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Intl.NumberFormat 示例</h1>
        <p class="description">使用 Intl.NumberFormat 对象根据不同的区域和选项格式化数字</p>

        <div class="input-section">
            <div class="input-group">
                <label for="number">输入数字:</label>
                <input type="number" id="number" value="1234567.891" step="0.001">
            </div>

            <div class="input-group">
                <label for="locale">选择区域:</label>
                <select id="locale">
                    <option value="zh-CN">中文 (中国)</option>
                    <option value="en-US">英语 (美国)</option>
                    <option value="de-DE">德语 (德国)</option>
                    <option value="ja-JP">日语 (日本)</option>
                    <option value="fr-FR">法语 (法国)</option>
                    <option value="ar-EG">阿拉伯语 (埃及)</option>
                    <option value="hi-IN">印地语 (印度)</option>
                    <option value="ru-RU">俄语 (俄罗斯)</option>
                </select>
            </div>

            <div class="input-group">
                <label for="style">格式化样式:</label>
                <select id="style">
                    <option value="decimal">数字 (decimal)</option>
                    <option value="currency">货币 (currency)</option>
                    <option value="percent">百分比 (percent)</option>
                    <option value="unit">单位 (unit)</option>
                </select>
            </div>

            <div class="input-group">
                <label for="currency" id="currency-label" style="display: none;">货币类型:</label>
                <select id="currency" style="display: none;">
                    <option value="USD">美元 (USD)</option>
                    <option value="EUR">欧元 (EUR)</option>
                    <option value="JPY">日元 (JPY)</option>
                    <option value="GBP">英镑 (GBP)</option>
                    <option value="CNY">人民币 (CNY)</option>
                    <option value="INR">印度卢比 (INR)</option>
                    <option value="RUB">俄罗斯卢布 (RUB)</option>
                </select>
            </div>
        </div>

        <button id="format-btn">格式化数字</button>

        <div class="results">
            <div class="result-card">
                <div class="result-title">格式化结果:</div>
                <div class="result-value" id="result"></div>
            </div>

            <div class="result-card">
                <div class="result-title">原始数字:</div>
                <div class="result-value" id="original"></div>
            </div>
        </div>

        <div class="code">
            <h3>代码示例:</h3>
            <pre id="code-example">// 代码将根据您的选择显示在这里</pre>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const numberInput = document.getElementById('number');
            const localeSelect = document.getElementById('locale');
            const styleSelect = document.getElementById('style');
            const currencySelect = document.getElementById('currency');
            const currencyLabel = document.getElementById('currency-label');
            const formatBtn = document.getElementById('format-btn');
            const resultElement = document.getElementById('result');
            const originalElement = document.getElementById('original');
            const codeExample = document.getElementById('code-example');

            // 显示/隐藏货币选择
            styleSelect.addEventListener('change', function () {
                if (this.value === 'currency') {
                    currencySelect.style.display = 'block';
                    currencyLabel.style.display = 'block';
                } else {
                    currencySelect.style.display = 'none';
                    currencyLabel.style.display = 'none';
                }
                updateCodeExample();
            });

            // 更新代码示例
            function updateCodeExample() {
                const number = numberInput.value;
                const locale = localeSelect.value;
                const style = styleSelect.value;
                const currency = currencySelect.value;

                let options = {};
                if (style === 'currency') {
                    options = { style: 'currency', currency: currency };
                } else if (style === 'percent') {
                    options = { style: 'percent' };
                } else if (style === 'unit') {
                    options = { style: 'unit', unit: 'meter' };
                } else {
                    options = { style: 'decimal' };
                }

                const optionsString = JSON.stringify(options, null, 2)
                    .replace(/"([^"]+)":/g, '$1:')
                    .replace(/"/g, "'");

                codeExample.textContent = `const number = ${number};
                                        const locale = '${locale}';
                                        const options = ${optionsString};

                                        const formatter = new Intl.NumberFormat(locale, options);
                                        const result = formatter.format(number);

                                        console.log(result);  // ${resultElement.textContent || '输出结果'}`;
            }

            // 格式化数字
            formatBtn.addEventListener('click', function () {
                const number = parseFloat(numberInput.value);
                const locale = localeSelect.value;
                const style = styleSelect.value;
                const currency = currencySelect.value;

                let options = {};
                if (style === 'currency') {
                    options = { style: 'currency', currency: currency };
                } else if (style === 'percent') {
                    options = { style: 'percent' };
                } else if (style === 'unit') {
                    options = { style: 'unit', unit: 'meter' };
                } else {
                    options = { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 3 };
                }

                try {
                    const formatter = new Intl.NumberFormat(locale, options);
                    const result = formatter.format(number);

                    resultElement.textContent = result;
                    originalElement.textContent = number;

                    updateCodeExample();
                } catch (error) {
                    resultElement.textContent = `错误: ${error.message}`;
                }
            });

            // 初始化
            updateCodeExample();
            formatBtn.click();
        });
    </script>
</body>

</html>